<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3>
        注册新用户
      </h3>
      <!-- 登录密码 -->
      <div class="content">
        <el-form :label-position="labelPosition" label-width="80px" :model="formData">
          <el-form-item label="用户名">
            <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 注册按钮 -->
      <div class="btn">
        <el-button type="primary" @click="register">完成注册</el-button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      userName: '',
      labelPosition: 'right',
      formData: {
        userName:'',
        email: '',
        password: '',
      },
    };
  },
  methods: {
    //获取验证码按钮的回调
    async getCode() {
      const { phone } = this;
      //先不处理表单验证业务
      if (phone) {
        try {
          //获取验证码成功
          await this.$store.dispatch("getCode", phone);
          //修改VC身上的code属性,让验证码自动展示
          this.code = this.$store.state.user.code;
        } catch (error) { }
      }
    },
    //注册按钮的回调
    async register() {
      let param = {
        userName: this.formData.userName,
        password: this.formData.password,
        email:this.formData.email,
        isAdmin:0
      }
      //目前不做表单验证
        try {
          //注册成功
          await this.$store.dispatch("registerUser", param);
          //让用户跳转到登录页面进行登录
          this.$router.push('/login');
        } catch (error) {
          //注册失败
          alert(error.message);
        }
    
    },
  },
};
</script>

<style lang="less" scoped>
.register-container {
  .register {
    width: 1200px;
    height: 445px;
    border: 1px solid rgb(223, 223, 223);
    margin: 40px auto;

    h3 {
      background: #ecf5ff;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      span {
        font-size: 14px;
        float: right;

        a {
          color: #e1251b;
        }
      }
    }

    .content {
      margin: 50px auto;
      width: 60%;
    }

    .btn {
      text-align: center;
      button {
        outline: none;
        background: #409eff;
        color: #fff !important;
        display: inline-block;
        font-size: 16px;
      }
    }
  }
}
</style>